第05章 WebSocket

第5章 WebSocket

一、背景

三种方法展示订单处理的前端

1) 在前端工程中，使用JavaScript监听订单处理结果消息发送到的Topic，然后刷新页面；

2) 在前端发送Ajax请求获取订单的最新状态，后端接收到请求后将订单状态返回给前端去显示；

3) 采用WebSocket 方式，后端的消息监听器类监听到消息处理结果Topic 中的消息后，通过WebSocket发送给前端；

• 使用JavaScript监听的优缺点分析：

  • 优点就是直接交互，简洁明了，降低了后端Spring的压力(不需要单独写一个接口，单独运行相关的Kafuka查询组件的信息)。
  • 缺点也是直接交互，使用JS监听，相当于用户客户端直接和信箱交互，这就会导致我的卡夫卡Topic信箱直接暴露，我认为这是一个不好、不安全的方式。卡夫卡信箱里面涉及到用户的订单数据，所以使用后端直接交互，然后后端Spring暴露访问接口，更加安全。

• 使用Ajax轮询的方式优缺点分析：

  • 相比较于上个方法JS直接跟Topic信箱交互，这个不安全，所以Ajax轮询的话，单独有一个查询接口（还可以增加鉴权），所以比较安全
  • 缺点相比较于上个JS直接交互的方法，这个是间接交互，所以消耗资源，更耗时间。

• WebSocket是一种主动的方式，后端可以主动的把结果推送给前端的客户端，而不需要前段通过定时设定，然后来不断的查询我们的订单结果。这就类比我们课上讲过的改作业，下订单就好比学生把作业交给老师（服务器），服务器改完作业主动通知学生来拿，如果采用的是1或者2的方法，需要学生每隔一段时间就来询问老师作业是否改完了，这浪费并且消耗了连接和资源，是一种不合理的方式，所以我这里果断弃用了前面的两种。归结来说三个优点

  • 推送功能：支持服务器端向客户端推送功能。服务器可以直接发送数据而不用等待客户端的请求。

  • 减少通信量：只要建立起websocket连接，就一直保持连接，在此期间可以源源不断的传送消息，直到关闭请求。也就避免了HTTP的非状态性。和http相比，不但每次连接时的总开销减少了，而且websocket的首部信息量也小 ，通信量也减少了。

  • 减少资源消耗：如果用AJax轮询的话，我们需要专门设置一个接口，运行相关的查询代码，而且由于前端是定时的不断的发请求来查询，相关的查询结果的代码要运行很多次，这浪费了资源，反而如果只用WebSocket，推送代码只用运行一次。

  • 但是也有缺点：比如需要浏览器支持WebSocket，例如我的Safari浏览器在WebSocket的测试中出现了一些问题（由于一些安全性的原因，但是Edge浏览器就可以正常保证WebSocket的连接），同时如果只是单页面涉及到WebSocket还好，涉及到多页面，定时推送，复杂的推送，就非常容易出问题了，不管是前端，还是后端都会遇到一些问题。

二、WebSocket

• 客户端向服务器发一个http的GET请求，发的时候要说明upgrade，马上要升级为ws链接，同时会发送一个key
• 服务器返回http的相应，101，切换协议，返回的时候会附带一个accept
• 客户端用相同的算法，把原来的经过计算后，看看服务器发回来的跟自己计算的是不是一样